<!-- 输入(筛选)选择框 -->
<template>
	<view class="select-input-box">
		<input class="tool-input" :value="value" type="text" disabled :placeholder="placeholder" @click="showBox" />
		<view class="select-bg" v-if="boxState" @click="hideBox">
			<view :class="'select-box'+(listState?' show':'')" @click.stop="">
				<view class="select-top">
					<input type="text" class="filter-input" v-model="input" />
					<view class="select-btn" @click="selectBtn">
						<text class="short-text">确定</text>
					</view>
				</view>
				<view class="filter-list">
					<view class="filter-item" v-for="(item,index) in selectList" :key="index" @click="input = item">
						<text>{{item}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['value', 'placeholder', 'list'],
		data() {
			return {
				boxState: false,
				listState: false,
				input: "",
			};
		},
		computed: {
			selectList() {
				const list = this.list;
				var input = this.input;
				return list.filter((item) => {
					return item.indexOf(input) !== -1
				})
			}
		},
		methods: {
			hideBox() {
				this.boxState = false;
				this.listState = false;
			},
			showBox() {
				this.boxState = true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.listState = true;
					}, 1)
				})
			},
			selectBtn() {
				var text = this.input;
				this.$emit('change', text)
				this.$emit('input', text)
				this.hideBox()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select-input-box {
		.tool-input {
			height: inherit;
			line-height: inherit;
			font: inherit;
			min-height: 0;
		}

		.select-bg {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.3);
			z-index: 99;

			.select-box {
				position: absolute;
				left: 0;
				bottom: 0;
				height: 90%;
				right: 0;
				background-color: #FFFFFF;
				border-radius: 20rpx 20rpx 0 0;
				transform: translateY(100%);
				transition: all 0.4s;

				.select-top {
					border-bottom: 2rpx solid #DDDDDD;
					padding: 30rpx 20rpx;
					display: flex;

					.filter-input {
						background-color: #ddd;
						padding: 0 30rpx;
						margin-right: 20rpx;
						line-height: 60rpx;
						height: 60rpx;
						border-radius: 72rpx;
						flex: 1;
					}

					.select-btn {
						line-height: 60rpx;
						font-size: 32rpx;
						padding: 0 20rpx;
					}
				}

				.filter-list {
					padding: 20rpx;
					background-color: #eee;
					height: calc(100% - 160rpx);
					overflow: auto;

					.filter-item {
						line-height: 1.5em;
						font-size: 32rpx;
						padding: 0.5em;
						border-bottom: 1rpx solid #eee;
					}
				}

				&.show {
					transform: translateY(0);
				}
			}
		}
	}
</style>
